<template>
  <div class="table-container">
    <el-table
      ref="dragTable"
      style="width: 100%"
      :key="itemKey"
      :row-class-name="
        ({ row, rowIndex }) => {
          row.index = rowIndex;
          if (selection.indexOf(row) > -1) {
            return 'tr-selected';
          }
          if (clickIndex === rowIndex) {
            return 'tr-selected';
          }
          if (rowIndex % 2 === 1) {
            return '';
          } else {
            return 'el-table__row--striped';
          }
        }
      "
      
      v-bind="$props"
      v-on="$listeners"
      :row-key="rowKey"
      @select="selectRow"
      @select-all="selectAll"
      tooltip-effect="light"
      height="string"
    >
    
      <template v-for="(col,index) in tableColumn">
        <el-table-column v-if="col.type==='selection'" :key="index" v-bind="col">
        </el-table-column>
        <!-- 按照传入的prop分配作用域插槽，返回row对象，使用插槽：
          <template #*你的column的prop*="{scope}">
            /** 你的内容 */
          </template> 
          例：
          <template #name="{scope}">
            {{ scope.name }}
          </template>-->
        <el-table-column show-overflow-tooltip :key="index+'-'+col.prop"  v-bind="col" v-else>
          <template slot-scope="scope" >
            <slot :name="col.prop" :scope="scope.row">
              <span v-if="col.type==='index'">{{ scope.$index+(pagination.page-1)*pagination.pageSize+1 }}</span>
              <span v-else-if="col.type==='date'">{{ scope.row[col.prop]|doTime(col.dateFormat) }}</span>
              <span v-else>{{ scope.row[col.prop] }}</span>
            </slot>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="!hideOperation" :min-width="operateWidth" fixed="right" :label="$t('operation')">
        <template slot-scope="scope">
          <slot name="operation" :scope="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="my-pagination" v-if="!hidePagination">
      <div style="font-size: 12px">{{$t('beenSelected-fornt')}}<span style="color:#409EFF;padding:0 4px;">{{selection.length}}</span>{{$t('beenSelected-back')}}</div>
      <el-pagination
      background
      :page-size="pagination.pageSize"
      :current-page="pagination.page"
      :page-sizes="[20,50,100,500]"
      layout="total, prev, pager, next,sizes"
      :total="pagination.total"
      @current-change="handleCurrentChange"
      @size-change="handelSizeChange"
      >
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { Table } from "element-ui";
import { TableColumn } from "element-ui";
import {doTime} from '@/filters/index'
export default {
  data() {
    return {
      itemKey:0,
      selection: [],
      // clickIndex:''
    };
  },
  props: {
    ...Table.props,
    rowKey:{
      type:String,
      default:'identity'
    },
    hidePagination:{   //隐藏分页
      type:Boolean,
      default:false
    },
    pagination:{
      type:Object,
      default:()=>{
        return {
          page:1,
          pageSize:50,    //单页条数
          total:0,        //总条数
        }
      }
    },
    tableColumn:{
      type:Array,
      default:()=>{
        return[{
          type:null,    //date 日期形式；index序号；selection勾选框
          dateFormat:null,
          ...TableColumn.props
        }]
      }
    },//
    //开启表格拖拽
    drageTable:{
      type:Boolean,
      default:false,
    },
    //隐藏操作列
    hideOperation:{
      type:Boolean,
      default:false,
    },
    clickIndex: [String, Number], // 多个可能的类型
    //操作栏最小宽度
    operateWidth:{
      type:String,
      default:'80px'
    }
  },
  mounted() {
    console.log(Table);
    if(this.drageTable){
      this.setSort()
    }
    
  },

  methods: {
    doTime,
    selectRow(selection) {
      this.selection = selection;
      this.$emit('selecechange',selection)
    },
    selectAll(selection) {
      this.selection = selection;
      this.$emit('selecechange',selection)
    },
    getSelection(){
      return this.selection
    },
    //跳页勾子
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.$emit('handleCurrentChange',this.pagination)
    },
    //改变每页条数勾子
    handelSizeChange(size) {
      this.pagination.pageSize = size;
      this.$emit('handelSizeChange',this.pagination)
    },
    setSort () {
      
      const el = this.$refs.dragTable.$el.querySelectorAll(
        '.el-table__body-wrapper > table > tbody'
      )[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', 
        setData: function (dataTransfer) {
          console.log('set',dataTransfer);
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.data[evt.oldIndex]
          this.data.splice(evt.oldIndex, 1)
          this.data.splice(evt.newIndex, 0, targetRow)
          console.table(this.data);

      // this.$emit('update:data', tmpList)

        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.table-container{
  height:100%;
  display:flex;
  justify-content: space-between;
  flex-flow: column;
}
.my-pagination{
  display:flex;
  justify-content: space-between;
  align-items: center;
  height:50px;
  padding:0px 12px;
}
::v-deep{
  .el-button{
    padding:0;
  }
  .el-table__header{
    background: #F2F3F5;
    tr{
      th{
        background: #F2F3F5;
        color:#000;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 110%;
      }
    }
  }
  

      .cell{
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

}
</style>
